<template>
    <div class="app-container">
        <div class="flex-head">
            <FormSearch 
                ref="formSearchRef" 
                :FormParams="queryParams"
                :FormRules="searchFormRules"
                :FormShow="showSearch"
                @submit="getList"
                @refresh="getList"
            />
            <el-row class="mb20">
                <el-col :span="20">
                    <el-button type="primary" size="default" @click="handleAdd">新增</el-button>
                </el-col>
                <el-col :span="4">
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
                </el-col>
            </el-row>
        </div>
        <TableBate
            id="tableBateId"
            :loading="loading"
            :TableHead="tableHead"
            :TableData="tableData"
            :TableAttrs="tableAttrs"
            @handleActionBarEvent="handleActionBarEvent">
        </TableBate>
        <pagination
            id="pagination"
            class="flex-table"
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNumber"
            v-model:limit="queryParams.pageSize"
            @pagination="getList" />
        <el-dialog v-model="dialog" title="新增项目" width="50vw" destroy-on-close center @close="handleCancel">
            <JsForm ref="formRef" :FormParams="formParams" :Rule="formRules" :PropsConfig="formProps">
                <template #inputNum="{ FormParams, props, labelProps }">
                    <el-form-item :label="props.label" :prop="props.prop">
                        <el-input-number v-model="FormParams[props.prop]" :min="1" :max="10" @change="handleChange" />
                    </el-form-item>
                </template>
            </JsForm>
            <div class="button-row">
                <el-button type="primary" @click="handleSubmitForm">提 交</el-button>
                <el-button @click="handleCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import FormSearch from '@/components/FormSearch/index'
import TableBate from '@/components/Table_Bate/index.jsx'
import FileUpload from '@/components/FileUpload'
import JsForm from '@/components/Form/index.tsx'
import { ElMessage, ElMessageBox } from 'element-plus'
import { searchFormRules, tableHead, formRules } from './config'
import { onMounted, reactive, toRefs, getCurrentInstance, ref } from 'vue'
import { useDebounceFn } from '@vueuse/core'
import { placeList, addPlace, deletePlace } from '@/api/project/place'
import { getCity } from '@/api/city'

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

const formSearchRef = ref()
// 右侧工具栏是否显示
const showSearch = ref(true)
// 列表数据
const tableData = ref([])
const loading = ref(false)
const dialog = ref(false)
const formRef = ref()
const total = ref(0)

const data = reactive({
    formParams: {
        sort: 1,
    },
    formProps: {
        'label-width': '110px',
    },
    queryParams: {
        pageNumber: 1,
        pageSize: 10,
    },
    tableAttrs: {},
})

const { formParams, formProps, queryParams, tableAttrs } = toRefs(data)

const uploadSuccessCallback = () => {
    uploadDialog.value = false
}
// 搜索
const searchFormSubmit = (data) => {
    getList()
}
const getList = () => {
    loading.value = true
    placeList(queryParams.value).then(({ result: res }) => {
        tableData.value = res.data
        total.value = res.total
        loading.value = false
    })
    // adaptiveResize(document.getElementById('tableBateId'))
}

// 新增项目
const handleSubmitForm = () => {
    formRef.value.FormRef.validate((valid) => {
        if (!valid) return proxy.$modal.msgWarning('请填写完整')
        addPlace(formParams.value).then(({ result: res }) => {
            ElMessage({
                type: 'success',
                message: '提交成功',
            })
            handleCancel()
            getList()
        })
        console.log(formParams.value, 'formParams.value')
    })
}

const handleCancel = () => {
    formRef.value.resetForm()
    dialog.value = false
}
// 上传表格
const handleAdd = () => {
    dialog.value = true
}

/**
 * 自适应
 * @param el
 */
const adaptiveResize = (el) => {
    const resizeObserver = new ResizeObserver((entries) => {
        debouncedFn(entries[0].contentRect)
    })
    resizeObserver.observe(el)
}

const debouncedFn = useDebounceFn((elContentRect) => {
    tableAttrs.value.height = elContentRect.height + 'px'
}, 100)

const handleActionBarEvent = (row, type) => {
    if (type === '删除') {
        handleDelete(row)
    }
}
const handleDelete = (row) => {
    ElMessageBox.confirm(`确认要删除名称为${row.name}的数据项?`, '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            deletePlace(row.placeId).then(() => {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                getList()
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: `取消删除`,
            })
        })
}
</script>

<style lang="scss" scoped>
.button-row {
    text-align: right;
    margin-top: 26px;
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
    .flex-table {
        flex: 1;
    }
}
</style>
